<template>
  <div>
    <h2>列表数据</h2>
    <my-goods :list = list>
      <template #default='{id}'>
         <button @click="del(id)">删除</button>
      </template>
    </my-goods>
    <my-goods :list = goods>
      <template #default ='{id}'>
        <button @click="dels(id)">删除</button>
    <button>添加</button>
      </template>
   
    </my-goods>
  </div>
</template>

<script>
import MyGoods from './components/MyGoods.vue'


export default {
  components: { MyGoods },
 
  data () {
    return {
  list: [
        { id: 2, name: "关羽" },
        { id: 4, name: "张飞" },
        { id: 5, name: "赵云" },
        { id: 7, name: "黄忠" },
        { id: 8, name: "马超" },
      ],
      goods: [
        { id: 2, name: "方便面" },
        { id: 4, name: "鸡爪子" },
        { id: 5, name: "火腿肠" },
        { id: 7, name: "大辣条" },
        { id: 8, name: "卤鸡蛋" },
      ]
    }
  },
 methods:{
  del(id){
   this.list = this.list.filter(item => item.id !== id)
  },
  dels(id){
   this.goods = this.goods.filter(item => item.id !== id)
  }
 }
 
}

</script>

<style>

</style>